<template>
  <div>
    <nav-bar>
      <template v-slot:center>
        <div style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">
          <span @click="showProject = true">{{projectName}}</span>
          <van-action-sheet v-model="showProject" :actions="projectList" @select="onSelect" />
        </div>
      </template>
      <template v-slot:right v-if="!(user.userType === '02' && (user.userStatus === '1' || user.userStatus === '3'))">
        <svg-icon icon-class="qrCode" @click.native="onProjectCode" />
      </template>
    </nav-bar>
    <div class="home maxinBox" v-if="user.userType === '04'">
      <div class="backgroundfff" style="margin: 0 auto;height: 47vh;padding: 6.25rem 0;">
        <div class="center">
          <img src="../../assets/images/null.png" alt="">
        </div>
      </div>
    </div>
    <div class="home maxinBox" v-else-if="user.userType === '02' && user.userStatus === '1'">
      <div class="backgroundfff" style="margin: 0 auto;height: 47vh;padding: 6.25rem 0;">
        <div class="center">
          <img src="../../assets/images/null.png" alt="">
          <p>您的入场申请已提交，请耐心等待审核通过...</p>
        </div>
      </div>
    </div>
    <div class="home maxinBox" v-else-if="user.userType === '02' && user.userStatus === '3'">
      <div class="backgroundfff" style="margin: 0 auto;height: 47vh;padding: 6.25rem 0;">
        <div class="center">
          <img src="../../assets/images/null.png" alt="">
          <p>{{localStorage.getItem('exitReason')}}</p>
        </div>
      </div>
    </div>
    <div class="home maxinBox" v-else>
      <div class="homeCompanyMessage">
        <van-row v-if="projectDetails && projectDetails.project">
          <!-- <van-col :span="24">{{$t('dashbord.home.building')}}: {{projectDetails.project.constructionUnit}}</van-col> -->
          <!-- <van-col :span="24">{{$t('dashbord.home.construction')}}: {{projectDetails.project.buildUnit}}</van-col> -->
          <!-- <van-col :span="24">{{$t('dashbord.home.design')}}: {{projectDetails.project.designerUnit}}</van-col> -->
          <!-- <van-col :span="24">{{$t('dashbord.home.supervising')}}: {{projectDetails.project.supervisionUnit}}</van-col> -->
          <van-col :span="12">{{$t('dashbord.home.startTime')}}: {{projectDetails.project.commencementTime | formatDate}}</van-col>
          <van-col :span="12">{{$t('dashbord.home.endTime')}}: {{projectDetails.project.completionTime | formatDate}}</van-col>
        </van-row>
      </div>
      <van-row @click="openWarn" class="backgroundfff marginTop5" style="padding: 0.3125rem;" v-if="user && user.userStatus !== '4'">
        <van-col :span="5">
          <img src="../../assets/dashbord/broadcast.png" style="width: 100%;" alt="">
        </van-col>
        <van-col :span="17">
          <van-notice-bar class="marginTop5" :scrollable="false">
            <van-swipe
              vertical
              class="notice-swipe"
              :autoplay="3000"
              :show-indicators="false"
               mode="link"
            >
              <van-swipe-item style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;" v-for="(item, index) in messageList" :key="index">{{item.messageContent || '--'}}</van-swipe-item>
            </van-swipe>
          </van-notice-bar>
        </van-col>
        <van-col :span="2">
          <van-icon style="line-height: 3.4375rem;" name="arrow" />
        </van-col>
      </van-row>
      <div class="homeUseModel marginTop5">
        <div class="backgroundfff" style="padding: 0.3125rem">
          <use-model v-for="(item, index) in useModuleList" :key="index" :data="item"></use-model>
          <use-model :data="addData"></use-model>
          <div class="clear"></div>
        </div>
      </div>
      <!-- <div class="backgroundfff marginTop5" style="padding: 0.625rem;">
        <div class="title fontWeight">
          <div>{{$t('dashbord.home.monitoring')}}</div>
        </div>
        <div style="display: flex;flex-wrap: wrap;">
          <environment-model :title="$t('dashbord.home.windSpeed')" :icon="WindMonitor" :content="`${windData}级`" style="margin-bottom: 0.3125rem;"></environment-model>
          <environment-model :title="$t('dashbord.home.temperature')" :icon="Temperature" :content="`${temperatureData}℃`" style="margin-bottom: 0.3125rem;"></environment-model>
          <environment-model :title="$t('dashbord.home.noise')" :icon="Noise" :content="`${noiseData}db`" style="margin-bottom: 0.3125rem;"></environment-model>
          <environment-model :title="$t('dashbord.home.pm25')" :icon="PM25" :content="`${dustData}PM25`" style="margin-bottom: 0.3125rem;"></environment-model> -->
          <!-- <environment-model :title="$t('dashbord.home.pm10')" :icon="PM10" content="32" style="margin-bottom: 0.3125rem;"></environment-model> -->
        <!-- </div>
      </div> -->
    </div>
  </div>
</template>

<script>
  import WindMonitor from '../../assets/dashbord/wind-monitor.png'
  import Temperature from '../../assets/dashbord/temperature.png'
  import Noise from '../../assets/dashbord/noise.png'
  import PM25 from '../../assets/dashbord/pm2.5.png'
  import PM10 from '../../assets/dashbord/pm10.png'
  import UseModel from './components/UseModel.vue'
  import EnvironmentModel from './components/EnvironmentModel.vue'
  import myAPI from '../../api/myAPI.js'
  import messageAPI from '../../api/messageAPI.js'
  import userApi from '../../api/userAPI.js'
  import dashbordAPI from '../../api/dashbordAPI.js'
  import environmentalMonitorAPI from '../../api/workAPI/environmentalMonitorAPI.js'
  export default {
    components:{
      UseModel,
      EnvironmentModel
    },
    data() {
      return {
        temperatureData: '',
        noiseData: '',
        windData: '',
        dustData: '',
        messageList: [],
        projectName: '首页',
        projectList: [],
        projectDetails: null,
        showProject: false,
        user: {
          userStatus: '',
          userType: '',
        },
        addData: {
          name: this.$t('dashbord.home.add'),
          name1: 'add-index',
          router: 'SettingHome'
        },
        useModuleList: [],
        video: "require('../../assets/dashbord/video.png)",
        study: "require('../../assets/dashbord/study.png)",
        environmentalMonitor: "require('../../assets/dashbord/environment.png)",
        addressBook: "require('../../assets/dashbord/address-book.png)",
        fixedInspection: "require('../../assets/dashbord/fixed-inspection.png.png)",
        add: "require('../../assets/dashbord/add-index.png)",
        WindMonitor: WindMonitor,
        Temperature: Temperature,
        carManager: "require('../../assets/dashbord/video.png)",
        Noise: Noise,
        PM25: PM25,
        PM10: PM10
      }
    },
    methods:{
      // 风速监测
      getWindSpeed() {
        environmentalMonitorAPI.getWindSpeed().then(res => {
          this.windData = res.value1
        })
      },
      // 噪音监测
      getNoise() {
        environmentalMonitorAPI.getNoise().then(res => {
          this.noiseData = res.value1
        })
      },
      // 温度监测
      getTemperature() {
        environmentalMonitorAPI.getTemperature().then(res => {
          this.temperatureData = res.value1
        })
      },
      // 扬尘监测
      getDust() {
        environmentalMonitorAPI.getDust().then(res => {
          this.dustData = res.value1
        })
      },
      // 查询预警信息
      getMessage() {
        let projectId = localStorage.getItem('projectId')
        messageAPI.getMessagelist(projectId, '', 7).then(res => {
          this.messageList = res.envWarning
        })
      },
      // 查看预警信息
      openWarn() {
        this.$router.push({
          name: 'Message',
          params: {
            type: 1
          }
        })
      },
      // 选择项目
      onSelect(item) {
        this.showProject = false;
        localStorage.setItem('projectId', item.value)
        this.projectName = item.name
        this.getProjectDetails()
        this.getMessage()
        this.getBuilderStatus()
      },
      // 查看项目二维码
      onProjectCode () {
        this.$router.push({
          name: 'ProjectCode',
          params: {
            data: this.projectDetails.project
          }
        })
      },
      // 我的项目列表
      getProjectList() {
        myAPI.getProjectList().then(res => {
          this.projectList = res.switchProjectVos.map(item => {
            return {
              name: item.projectName,
              value: item.projectId
            }
          })
        })
      },
      // 项目详情
      getProjectDetails() {
        let projectId = localStorage.getItem('projectId')
        myAPI.getProjectDetails(projectId).then(res => {
          this.projectDetails = res
          if (!(this.user.userType === '02' && (this.user.userStatus === '1' || this.user.userStatus === '3'))) {
            this.projectName = res.project.projectName
          }
        })
      },
      // 查询所有模块
      getUerModel() {
        myAPI.getFunction().then(res => {
          this.useModuleList = res.result.map(item => {
            if (item.openStatus === 1) {
              return item
            }
          }).filter(Boolean).slice(0,7)
        })
      },
      getBuilderStatus() {
        let projectId = localStorage.getItem('projectId')
        dashbordAPI.getWorkTest(projectId).then(res => {
          localStorage.setItem('userStatus', res.status)
          this.user.userStatus = localStorage.getItem('userStatus')
          this.user.userType = localStorage.getItem('userType')
        })
      }
    },
    mounted() {
      this.getBuilderStatus()
      this.getMessage()
      this.user.userStatus = localStorage.getItem('userStatus')
      this.user.userType = localStorage.getItem('userType')
      if (this.user.userType === '02' && (this.user.userStatus === '1' || this.user.userStatus === '3')) {
        this.projectName = '首页'
      }
      this.getProjectDetails()
      this.getUerModel()
      this.getProjectList()
      this.getWindSpeed()
      this.getDust()
      this.getNoise()
      this.getTemperature()
    }
  }
</script>

<style scoped lang="scss">
  /deep/ .van-action-sheet{
    max-height: 40%
  }
  .home{
    &CompanyMessage{
      font-size: 0.875rem;
      color: #fff;
      padding: 0.625rem 0;
      height: 9.375rem;
      line-height: 9.375rem;
      background-image: url("../../assets/dashbord/banner.png");
      .van-col{
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        padding: 0.3125rem 0.9375rem;
      }
    }
    .van-notice-bar{
      background-color: inherit;
      color: #666;
    }
    .clear{
      clear: $clear;
    }
    &Add{
      font-size: 5 * $fontSize;
    }
    .notice-swipe {
      height: 3.4375rem;
      line-height: 3.4375rem;
    }
    .title{
      padding: 0.625rem;
      font-size: 0.875rem;
      div{
        margin: 0.3125rem;
        border-left: 0.125rem solid #1577FF;
        padding-left: 0.3125rem;
      }
    }
  }
</style>
